<template>
  <div class="new_div1">
    <el-dialog
      open-delay="0"
      close-delay="0"
      v-model="dialogVisibles"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      @close = "share_cancel"
      title="产品明细列表"
      width="60%"
      draggable
    >
      <div style="margin-bottom: 10px">
        <el-form ref="formQuery" label-width="70px" :model="formList">
          <el-row :gutter="24" justify="space-around">
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
              <div>
                <el-form-item style="width: 100%" label="品牌" prop="assistant_id">
                  <VabSelectForm @change="brandChange" :multiple="true" v-if="assistant_list.length >0"  v-model="formList.assistant_id" :options="assistant_list"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
              <div>
                <el-form-item style="width: 100%" label="产品编码" prop="number">
                  <SelectLoading :brandName="brandName" v-if="type==2" style="width: 100%" v-model="formList.number" type="number" :multiple="true" :userOrgId="props.org_id" />
                  <PriceSelectLoading :brandName="brandName"  v-if="type==1" style="width: 100%" v-model="formList.number" type="number" :multiple="true" :priceId="props.org_id"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
              <div>
                <el-form-item style="width: 100%" label="产品名称" prop="name">
                  <SelectLoading :brandName="brandName"  v-if="type==2" style="width: 100%" v-model="formList.name" type="name" :multiple="true" :userOrgId="props.org_id" />
                  <PriceSelectLoading  :brandName="brandName" v-if="type==1" style="width: 100%" v-model="formList.name" type="name" :multiple="true" :priceId="props.org_id"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
              <div>
                <el-form-item style="width: 100%" label="一级类目" prop="class_id1">
                  <VabSelectForm :multiple="true"  @change="(value: string) => {
                    _ProductSearchClass(value)
                  }" v-if="class_id1_list.length >0"  v-model="formList.class_id1" :options="class_id1_list"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
              <div>
                <el-form-item style="width: 100%" label="二级类目" prop="class_id2">
                  <el-select
                    collapse-tags
                    clearable
                    collapse-tags-tooltip
                    filterable
                    v-model="formList.class_id2"
                    class="width_100"
                    placeholder="请选择"
                    multiple
                  >
                    <el-option v-for="item in class_id2_list" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" :span="8">
              <div>
                <el-form-item style="width: 100%" label="系列" prop="xl_id">
                  <el-select
                    collapse-tags
                    clearable
                    collapse-tags-tooltip
                    filterable
                    v-model="formList.xl_id"
                    class="width_100"
                    placeholder="请选择"
                    multiple
                  >
                    <el-option v-for="item in xl_id_list" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :span="24">
              <div class="button-query">
                <el-button v-debounce="query" size="small" type="primary">
                  查询
                </el-button>
                <el-button size="small" v-debounce="resetting">
                  重置
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <el-table
          v-loading="loading"
          load="false"
          ref="multipleTableRef"
          border
          :data="tableData"
          height="450px"
          style="overflow: auto;width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column label="序号" align="center" width="80">
            <template #default="scope">
            <span
              v-text="scope.$index + 1"
            ></span>
            </template>
          </el-table-column>
          <el-table-column
            empty-text="--"
            label="产品编码"
            prop="number"
            align="center"
            width="100"

          >
            <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.number,  '')"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            empty-text="--"
            label=" 产品名称"
            prop="name"
            align="center"
            min-width="100"
          >
            <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.name,  '')"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            empty-text="--"
            label="品牌"
            align="center"
            prop="assistant_name"
            width="100"

          >
            <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.assistant_name,  '')"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            empty-text="--"
            label="系列"
            align="center"
            prop="xl_name"
            width="100"

          >
            <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.xl_name,  '')"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            empty-text="--"
            label="一级类目"
            align="center"
            prop="class_name1"
            width="100"

          >
            <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.class_name1,  '')"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            empty-text="--"
            label="二级类目"
            align="center"
            prop="class_name2"
            width="100"

          >
            <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.class_name2,  '')"
              ></span>
            </template>
          </el-table-column>
<!--          <el-table-column
            empty-text="&#45;&#45;"
            label="售价"
            align="center"
            prop="price"
            width="100"
          >
            <template #default="scope">
              <span
                class="ellipsis"
              >
                {{ type == 1 ? Number(scope.row.price).toFixed(2) :  Number(scope.row.retail_price).toFixed(2) || '&#45;&#45;'}}
              </span>
            </template>
          </el-table-column>-->
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer customerDialog3">
           <el-button @click="share_cancel">取消</el-button>
          <el-button type="primary"  @click="share_save">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import lodash from 'lodash';
import SelectLoading from '/@/components/lazySelect/demo.vue'
import PriceSelectLoading from '/@/components/lazySelect/priceSelect.vue'
import {getProductList, getProductSearch, getProductSearchSelect, productSearchClass} from "/@/api/dms/product";
import {ElMessage} from "element-plus";
import {FieldFormat} from "/@/utils/utils";
import LazySelect from '/@/components/lazySelect/index.vue'
import {customerPriceProductList, customerPriceProductSelect} from "/@/api/dms/customer";
import {withConverter} from "js-cookie";
import {ref} from "vue";
defineOptions({
  name: "ProductsAll"
  })
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const count = ref(0)
const dialogVisibles =ref(false)
const  formQuery = ref<any>(null)
const loading =  ref(false)
const formList =  ref<any>({
  assistant_id:[],
  name:[],
  number:'',
  class_id1:[],
  class_id2:[],
  xl_id:[],
})
const brandName =ref<any>([])
const tableData =ref<any>([])
const props = defineProps(['org_id'])
// *********查询***************
const assistant_list = ref([])
const name_list = ref([])
const number_list = ref([])
const class_id1_list = ref([])
const class_id2_list = ref<any>([])
const all_date = ref<any>([])
const class_date = ref(undefined)
// 系列
const xl_id_list = ref([])
// **********判断***************
const type = ref(1)
//多选
let multipleDate = reactive<any>([])
let multipleList = ref<any>(undefined)
const handleSelectionChange = (val: any, va: any) => {
  multipleDate = val
  // multipleDate1 = val
}
//********滚动加载下*************

const pageSize = ref(1)
const loadingSelect = ref(false)
const hasMore = ref(true)
const handleLoadMore =lodash.throttle(async (newPage: number) => {
  if ( !props.org_id) return
  page.value = await newPage
  await getPriceList(props.org_id)
}, 500)
// 按钮
/*const share_save = lodash.debounce( async (va:any)=>{
  multipleList = multipleDate
},500)*/
const share_save = (va:any)=>{
  multipleList.value = [...multipleDate]
  ElMessage.success('提交成功')
  multipleDate = []
  brandName.value = []
  dialogVisibles.value= false
  formQuery.value.resetFields()
  product_list(0)
  assistant_list.value = all_date.value.brand?.map((i:any)=> {return {value:i.entry_id,label:i.name}})
  number_list.value = all_date.value.number?.map((i:any)=> {return {value:i.number}})
  name_list.value = all_date.value.name?.map((i:any)=> {return {value:i.name,label:i.name}})
  class_id1_list.value = all_date.value.class_one?.map((i:any)=> {return {value:i.id,label:i.data_title}})
  class_id2_list.value = all_date.value.class_two?.map((i:any)=> {return {value:i.id,label:i.data_title}})
  xl_id_list.value = all_date.value.series?.map((i:any)=> {return {value:i.id,label:i.data_title}})
}
const share_cancel = ()=>{
  multipleDate = []
  brandName.value = []
  dialogVisibles.value= false
  formQuery.value.resetFields()
  product_list(0)
  assistant_list.value = all_date.value.brand?.map((i:any)=> {return {value:i.entry_id,label:i.name}})
  number_list.value = all_date.value.number?.map((i:any)=> {return {value:i.number}})
  name_list.value = all_date.value.name?.map((i:any)=> {return {value:i.name,label:i.name}})
  class_id1_list.value = all_date.value.class_one?.map((i:any)=> {return {value:i.id,label:i.data_title}})
  class_id2_list.value = all_date.value.class_two?.map((i:any)=> {return {value:i.id,label:i.data_title}})
  xl_id_list.value = all_date.value.series?.map((i:any)=> {return {value:i.id,label:i.data_title}})
}
const getPriceList = (id:any,name='',number='')=>{
  if(type.value == 1){
    customerPriceProductSelect({page:1, limit:2000,id:id}).then((data:any)=>{
      if(data.code == 200){
        number_list.value =   data.data.list?.map((i:any)=> {return {value:i.number,label:i.number}})
        name_list.value = data.data.list?.map((i:any)=> {return {value:i.name,label:i.name}})
      }
    })
  }else if(type.value == 2){
    getProductSearchSelect({page:page.value, limit:200,filter:{use_org_id:id,name:name,number:number}}).then((data:any)=>{
      if(data.code == 200){
        loading.value = false
        number_list.value =   data.data.list?.map((i:any)=> {return {value:i.number,label:i.number}})
        name_list.value = data.data.list?.map((i:any)=> {return {value:i.name,label:i.name}})

      }
    })
  }

}
/*watchEffect(()=>{

})*/
watch(class_date,()=>{
  if(class_date){
    class_id2_list.value = class_date.value
  }
})
watch(props.org_id,()=>{
  if(props.org_id){
    getPriceList(props.org_id)
  }
})
const brandChange =(va:any)=>{
  brandName.value = va
  formList.value.number= []
  formList.value.name = []
  /*getProductSearchSelect({page:1, limit:10,})
  console.log(va,'44444')*/
}
const _GetProductSearch = async () => {
  try {
    const res = await getProductSearch()
    res.data.brand.push({ entry_id: '', name: '空' })
    res.data.class_one.push({ id: '', data_title: '空' })
    res.data.class_two.push({ id: '', data_title: '空' })
    res.data.series.push({ id: '', data_title: '空' })
    res.data.category.push({ id: '', data_title: '空' })
    all_date.value = res.data
    assistant_list.value = all_date.value.brand?.map((i:any)=> {return {value:i.entry_id,label:i.name}})
    number_list.value = all_date.value.number?.map((i:any)=> {return {value:i.number}})
    name_list.value = all_date.value.name?.map((i:any)=> {return {value:i.name,label:i.name}})
    class_id1_list.value = all_date.value.class_one?.map((i:any)=> {return {value:i.id,label:i.data_title}})
    class_id2_list.value = all_date.value.class_two?.map((i:any)=> {return {value:i.id,label:i.data_title}})
    xl_id_list.value = all_date.value.series?.map((i:any)=> {return {value:i.id,label:i.data_title}})
  } catch (error) { }
}
// 二级分类
const _ProductSearchClass = async (class_id: any) => {
  try {
    const res = await productSearchClass({ class_id })
    class_id2_list.value = res.data.map((item: any) => {
      return {
        value: item.id,
        label: item.data_title
      }
    })
  } catch (error) {

  }
}
const query = lodash.debounce( async (va:any)=>{
  product_list(1)
},500)
const resetting =lodash.debounce( async (va:any)=>{
  formQuery.value.resetFields()
  brandName.value = []
  product_list(2)
},500)
//查询 接口
const product_list = async (tab:number)=>{
  loading.value = true
  if(type.value == 1){
    await customerPriceProductList({page:1,limit:20,id:props.org_id,filter:{...formList.value}}).then((data:any)=>{
      if(data.code == 200){
        tableData.value = data.data.list
        loading.value = false
        if(tab == 1){
          ElMessage.success('查询成功')
        } else if(tab == 2){
          ElMessage.success('重置成功')
        }
      }
    })
  }else if(type.value == 2){
   await getProductList({page:1,limit:20,type:1,filter:{...formList.value,use_org_id:props.org_id}}).then((data:any)=>{
     if(data.code == 200){
       tableData.value = data.data.list
       loading.value = false
       if(tab == 1){
         ElMessage.success('查询成功')
       } else if(tab == 2){
         ElMessage.success('重置成功')
       }
     }
   })
  }

}
// 列表接口
const page = ref(1)
const product_date = async ()=>{
  loading.value = true
  if(type.value == 1){
    if(props.org_id){
      await customerPriceProductList({page:page.value,limit:20,id:props.org_id,filter:{...formList.value}}).then((data:any)=>{
        if(data.code == 200){
          tableData.value = [...tableData.value,...data.data.list]
          loading.value = false
        }
      })
    }
  }else if(type.value == 2){
    await getProductList({page:page.value,limit:20,type:1,filter:{...formList.value,use_org_id:props.org_id}}).then((data:any)=>{
      if(data.code == 200){
        tableData.value = [...tableData.value,...data.data.list]
        loading.value = false
      }
    })
  }

}
const query_class = (value: any) => {
  const arr = all_date.value.class_two?.map((i:any)=> {return {value:i.id,label:i.data_title}})
  class_id2_list.value = arr.filter((option: any) => {
    const Boo = (option?.label ?? '')?.toLowerCase().includes(value?.trim().toLowerCase())
    if (Boo) return option
  })
}
const multipleTableRef = ref<any>()
// 页签滚动分页
const scroll = ()=>{
 const table = multipleTableRef.value && multipleTableRef.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
  table && table.addEventListener('scroll',(res:any)=>{
    const scrollContainer = res.target;
    const scrollHeight = scrollContainer.scrollHeight;
    const scrollTop = scrollContainer.scrollTop;
    const clientHeight = scrollContainer.clientHeight;
    if (scrollTop + clientHeight >= scrollHeight) {
      page.value = page.value +1
      // 执行滚动到底部时的操作
      product_date()
    }
  })
}

watchEffect(()=>{
  if(multipleTableRef){
    scroll()
  }
})
watch(dialogVisibles,()=>{
  if(props.org_id && dialogVisibles ){
    product_date()
  }
})
//抛出数据
defineExpose({
  dialogVisibles,// 弹窗
  multipleList,// 多选的数据
  type,//接口
})
onMounted(()=>{
  _GetProductSearch()
})
</script>

<style lang="scss" scoped>
.new_div1{
  :deep(){
    .el-dialog__body{
      padding-top: 10px;
    }
  }
}
.customerDialog3{
  display: flex;
  justify-content: center;
}
.button-query {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
</style>
